<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>abcjs: Font Editor</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
	<script src="scale_font.js"></script>

	<style media="screen" type="text/css">
		textarea {
			width: 800px;
			height: 200px;
			margin-bottom: 12px;
		}

	</style>

	<script>
		function printPath(path) {
			// Offset a bit
			var arr = path.split(' ');
			var first = arr[0].split('M');
			if (first.length > 1) {
				arr[0] = 'M' + (parseFloat(first[1]) + 30);
				arr[1] = parseFloat(arr[1]) + 30;
			} else {
				arr[1] = parseFloat(arr[1]) + 30;
				arr[2] = parseFloat(arr[2]) + 30;
			}
			path = arr.join(' ');
			var paper = Raphael(document.getElementById("canvas-abcjs"), 300, 300);
			var symb = paper.path(path).attr({fill: "#000", stroke: "none"});
			paper.canvas.parentNode.style.height=""+300+"px";
			paper.setSize(300,300);

		}
		function testFont() {
			var el = document.getElementById("character-definition");
			var text = el.value;
			if (Raphael.fonts)
				Raphael.fonts['abcjs'] = null;
			Raphael.registerFont({
				"svg": true,
				"w": 250,
				"face": {
					"font-family": "abcjs",
					"font-weight": 400,
					"font-stretch": "normal",
					"units-per-em": "1000",
					"panose-1": "2 0 5 3 0 0 0 0 0 0",
					"ascent": "800",
					"descent": "-200",
					"x-height": "25",
					"bbox": "-513.5 -1248.89 800.126 1323.13",
					"underline-thickness": "50",
					"underline-position": "-75",
					"unicode-range": "U+E300-U+E302"
				},
				"glyphs": {
					"\ue301": {
						"d": text,
						"w": 500
					}
				}
			});
			Raphael.fonts['abcjs'][0].glyphs = {
				"\ue301": {
					"d": text,
					"w": 500
				}
			};
			el = document.getElementById("canvas-abcjs");
			el.innerHTML = "";
			printPath(text);

			var output = text.split(/([Mmlz])| /);
			var arr = [];
			for (var i = 0; i < output.length; i++) {
				if (output[i] !== '' && output[i] !== undefined && output[i] !== "\n")
					arr.push(output[i]);
			}
			var steps = [];
			var cache = [];
			for (i = 0; i < arr.length; i++) {
				var el1 = arr[i];
				if (el1 === 'z')
					steps.push("['" + el1 + "']");
				else {
					if ("Mlm".indexOf(el1)>=0)
						cache.push("'"+el1+"'");
					else
						cache.push(el1);
					if (cache.length === 3) {
						steps.push("[" + cache.join(',') + "]");
						cache = [];
					}
				}
			}

			output = "{d:[";
			output += steps.join(",");
			output += "],w:12.81,h:15.63}";

			document.getElementById("output").innerHTML = output;
		}
	</script>
</head>
<body onload="testFont();">
<h1>abcjs Font Editor</h1>
<p>
</p>
<textarea id="character-definition" onkeyup="testFont();"></textarea>
<div id="output"></div>
<div id="canvas-abcjs"></div>
<h2>Editor Instructions</h2>
<div>Use this to play with different character shapes in Raphael. After creating the shape you want, paste the output code into
	abc_glyphs.js. The legal things to put in the textarea are "M", "l", or "m" followed by two numbers. The last character must be a "z".
</div>
<div>
	The "l" element MUST be lower case (that is, use relative coordinates). The path is calculated from the beginning of the entire SVG, so
	absolute coordinates will end up in the upper left of the engraving.
</div>
<div>
	For instance, the following is the shape of a whole rest:
</div>
<pre>M0.06 0.03
l0.09 -0.06
l5.46 0.00
l5.49 0.00
l0.09 0.06
l0.06 0.09
l0.00 2.19
l0.00 2.19
l-0.06 0.09
l-0.09 0.06
l-5.49 0.00
l-5.46 0.00
l-0.09 -0.06
l-0.06 -0.09
l0.00 -2.19
l0.00 -2.19
z</pre>
</body>
</html>
